<template>
  <div class="index-item">
    <!--  -->
    <el-row :gutter="20">
      <ElCol :span="18">
        <div class="left">
          <div class="left-header">
            <div class="title">
              <i class="el-icon-star-off"></i>
              <span>{{title}}</span>
            </div>
            <div class="opt">
              <el-button plain size="mini" @click="more">更多</el-button>
            </div>
          </div>
          <div class="left-body">
            <div v-for="(item,index) in list" :key="index" class="my-video-card">
              <video-card
                :id="item.id"
                :src="item.coverPhoto"
                :title="item.title"
                :up="item.userName"
                :play="item.playNum"
                :time="item.uploadTime"
                :video="item"
              ></video-card>
            </div>
            <div v-if="list.length<1">该分区暂无视频</div>
          </div>
        </div>
      </ElCol>
      <ElCol :span="6">
        <div class="right">
          <div class="right-header">
            <div class="title">
              <span>排行</span>
            </div>
          </div>
          <div class="right-body">
            <ul class="rank">
              <li v-for="(item,index) in rankings" :key="index" @click="toPlay(item.id)">
                <span class="tag">{{index+1}}</span>
                {{item.title}}
              </li>
              <li v-for="n in (10-rankings.length)" :key="rankings.length+n">
                <span class="tag">{{rankings.length+n}}</span>暂无排行
              </li>
            </ul>
          </div>
        </div>
      </ElCol>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index-item",
  props: ["title", "typeId", "type2Id", "handleMore"],
  data: function() {
    return {
      list: [],
      rankings: []
    };
  },
  mounted: function() {
    //初始化list
    /* var videoItem = {
      src: "/img/none.png",
      title: "暂无",
      userName: "暂无",
      playNum: "0",
      uploadTime: "9999-01-01 12:00"
    };
    for (var i = 0; i < 8; i++) this.list.push(videoItem); */

    this.getVideo();
    this.getRankings();
  },
  methods: {
    getVideo() {
      this.axios
        .post("video/getVideoByType", {
          type1Id: this.typeId,
          type2Id: this.type2Id,
          pageSize: 8
        })
        .then(res => {
          this.list = res.data.page.list;
        });
    },
    getRankings() {
      this.axios
        .post("video/rankings", {
          type1Id: this.typeId,
          type2Id: this.type2Id
        })
        .then(res => {
          this.rankings = res.data.page.list;
          console.log("rank", res);
        });
    },
    more() {
      /* this.handleMore(typeId,type2Id); */
      this.$router.push({
        name: "more",
        query: { type1Id: this.typeId, type2Id: this.type2Id }
      });
    },
    toPlay(id) {
      let routeUrl = this.$router.resolve({
        name: "play",
        query: { id: id }
      });
      window.open(routeUrl.href, "_blank");
    }
  },
  watch: {
    type2Id: function() {
      this.getVideo();
    }
  }
};
</script>

<style lang="scss" scoped>
.index-item {
  padding: 30px 0 0 0;
  font-size: 12px;
  .left {
    .left-header {
      display: flex;
      justify-content: space-between;
      .opt {
        padding-right: 20px;
      }
    }
    .left-body {
      padding: 16px 0 0 0;
      display: flex;
      flex-wrap: wrap;
      //justify-content: space-between;
      
      .my-video-card {
        margin: 0 50px 25px 0px;
        &:nth-child(4n){
        margin: 0 0 25px 0;
      }
      }
    }
  }
  //右边的情况
  .right {
    .right-body {
      ul {
        padding: 0px;
        li {
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          word-wrap: break-word;
          &:hover {
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .rank {
        .tag {
          color: #fafafa;
          width: 20px;
          display: inline-block;
          height: 20px;

          background: #909399;
          border-radius: 2px;
          line-height: 20px;
          text-align: center;
          margin-right: 7px;
        }
        li:nth-child(1) .tag {
          background: #e454ad;
          font-size: 18px;
        }
        li:nth-child(2) .tag {
          background: #e454ad;
          font-size: 16px;
        }
        li:nth-child(3) .tag {
          background: #e454ad;
          font-size: 16px;
        }
      }
    }
  }
}
.title {
  color: #5754e4;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
}
</style>